<template>
    <div>
        <el-form label-width="auto">
            <div class="params-form-gray params">
                <el-form-item label="关联单据编码" prop="loanedBillCode">
                    <el-input v-model="params.loanedBillCode" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="科目" prop="subjectId">
                    <el-cascader v-model="params.subjectId" :options="options" style="flex: 1;"
                        :props="{ label: 'subjectName', value: 'subjectId' }" :show-all-levels="false" />
                </el-form-item>
                <el-form-item label="发生时间" prop="date">
                    <el-date-picker v-model="params.date" type="daterange" start-placeholder="开始时间"
                        end-placeholder="结束时间" value-format="YYYY-MM-DD" />
                </el-form-item>
                <el-form-item label="添加方式" prop="source">
                    <el-select v-model="params.source">
                        <el-option :value="0" label="系统生成"></el-option>
                        <el-option :value="1" label="手动添加"></el-option>
                    </el-select>
                </el-form-item>
                <span></span>
                <el-form-item>
                    <el-button type="primary" :icon="Search" @click="init">查询</el-button>
                    <el-button type="primary" plain :icon="RefreshRight" @click="reset">重置</el-button>
                </el-form-item>
            </div>
        </el-form>
        <div class="opeater">
            <div class="left">
                <el-button type="primary" plain @click="exportData">导出</el-button>
                <el-button type="primary" @click="batch">批量退还</el-button>
            </div>
            <div class="right">
                <el-input placeholder="根据姓名电话查询" v-model="params.partnerValue" @keyup.enter="init" @blur="init">
                    <template #prepend>
                        <el-select v-model="params.partnerType" placeholder="请选择" @change="init" style="width: 115px">
                            <el-option v-for="item, index in type" :label="item" :value="Number(index)" />
                        </el-select>
                    </template>
                </el-input>
                <el-button type="primary" plain :icon="RefreshRight" @click="resetKey">重置</el-button>
            </div>
        </div>
        <div class="table">
            <el-table :data="data" style="width: 100%" max-height="calc(100vh - 460px)"
                @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="40" />
                <el-table-column prop="loanedBillCode" label="记账编码" width="180" />
                <el-table-column prop="addDate" label="发生时间" width="200" />
                <el-table-column prop="partnerName" label="合作方" min-width="200">
                    <template #default="scope">
                        {{ type[scope.row.partnerType] }}-{{ scope.row.partnerName }}
                    </template>
                </el-table-column>
                <el-table-column prop="remark" label="备注说明" width="150" />
                <el-table-column prop="address" label="凭证" width="240">
                    <template #default="scope">
                        <div>
                            <div v-for="item in scope.row.subjects">{{ ['借', '贷'][item.type - 1] }} : {{
                        item.subjectName
                    }}￥{{ item.money }}</div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="orderCode" label="关联单据" width="240">
                    <template #default="scope">
                        <template v-if="scope.row.slipCode">
                            订单：<div class="link"
                                @click="toPath({ slipCode: scope.row.slipCode, type: scope.row.slipType })">{{
                        scope.row.slipCode }}</div>
                        </template>
                        <span v-else>--</span>
                    </template>
                </el-table-column>
                <el-table-column label="添加方式" width="120">
                    <template #default="scope">
                        {{ ['系统生成', '手动添加'][scope.row.source] }}
                    </template>
                </el-table-column>
                <el-table-column prop="createBy" label="添加人" width="180">
                    <template #default="scope">
                        {{ scope.row.createBy || '系统生成' }}
                    </template>
                </el-table-column>
                <el-table-column label="操作" fixed="right" width="130">
                    <template #default="scope">
                        <el-button type="primary" link size="small" @click='refund(scope.row)'>退还</el-button>
                    </template>
                </el-table-column>
                <template #empty>
                    <el-empty />
                </template>
            </el-table>
        </div>
        <div class="pagination">
            <el-pagination v-model:current-page="query.current" v-model:page-size="query.size"
                :page-sizes="[10, 20, 50, 100]" layout="total, sizes, prev, pager, next, jumper" :total="total"
                @size-change="init" @current-change="init" />
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { RefreshRight, Search } from '@element-plus/icons-vue';
import { type, slipUrl } from "@/utils/config";
import { getList, getSubjectTree, back, exportRecord } from "@/apis/record";
import { ElMessage } from 'element-plus';
import { useRouter } from "vue-router";
import exportExcel from "@/utils/exportExcel";
const router = useRouter();
const toPath = (query) => {
    const path = slipUrl(query.type);
    if (path) {
        const routeInfo = router.resolve({
            path,
            query
        });
        const url = routeInfo.href;
        window.open(url, '_blank')
    }
}
const query = ref({
    current: 1,
    size: 10
})
const checked = ref([])
const params = ref({
    source: undefined,
    status: 1
});
const options = ref([])
const data = ref([])
const total = ref(0);
const reset = () => {
    params.value = {};
    init()
}
const batch = async () => {
    await back({ loanedBillIds: checked.value });
    init();
    ElMessage.success('操作成功')
}
const refund = (item) => {
    checked.value = [item.loanedBillId];
    batch();
}
const resetKey = () => {
    params.value.partnerType = '';
    params.value.partnerValue = '';
    init()
}
const getparamData = () => {
    const paramsData = { ...params.value };
    const subjectId = paramsData.subjectId ? paramsData.subjectId[paramsData.subjectId.length - 1] : undefined;
    if (paramsData.date) {
        paramsData.addDateStart = paramsData.date[0] + ' ' + '00:00:00';
        paramsData.addDateEnd = paramsData.date[1] + ' ' + '23:59:59';
    }
    delete paramsData.date;
    return { ...paramsData, subjectId };
}
/**
 * 初始化
 */
const init = async () => {
    const res = await getList(query.value, getparamData());
    data.value = res.data.list;
    total.value = res.data.total;
}
/**
 * 获取科目树
 */
const getTree = async () => {
    const res = await getSubjectTree();
    options.value = res.data;
}
const handleSelectionChange = (value) => {
    checked.value = value.map(v => v.loanedBillId);
}
const exportData = async () => {
    const res = await exportRecord(getparamData());
    exportExcel(res, '已记账')
}
onMounted(() => {
    init();
    getTree()
})
</script>

<style lang="scss" scoped>
@import '../index.scss';
</style>